<template>
	<sc-table-select :show-header="false" class="tableSelect" :props="props" :params="params" @change="onChange"
		ref="select" v-model="selectModel" style="opacity: 1; height: 1px;width: 1px; visibility: hidden;"
		:multiple="multiple" :apiObj="$API.hm4.customer.search" :table-width="600" :table-height="500" clearable
		collapse-tags-tooltip>
		<template #header="{form, submit}">
			<div style="display: flex;">
				<el-form :inline="true" :model="form">
					<el-form-item>
						<view style="display: flex;flex-direction: row;gap: 15px;">
							<el-input ref="input" style="width: 220px;" placeholder="手机号码/名字/卡号" v-model="form.keyword"
								clearable @keyup.enter.native="preSubmit(form,submit)"></el-input>
							<el-button type="primary" @click="preSubmit(form,submit)">查询</el-button>
						</view>
					</el-form-item>
				</el-form>
				<div style="flex: 1;">
					&nbsp;
				</div>
			</div>
		</template>
		<el-table-column label="详情">
			<template #default="{row}">
				<view style="display: flex;flex-direction: row; gap:10px; align-items: center;">
					<view class="user-avatar" :class=" row.ctm_sex =='M'? 'sex-nan':'sex-nv'"></view>
					<view class="">
						<p>机构: {{row.organizeName}}</p>
						<p>姓名: {{row.ctm_name}}</p>
						<p>卡号: {{row.ctm_code}}</p>
						<p>手机: {{row.ctm_mobile}}</p>
					</view>
				</view>
			</template>
		</el-table-column>
		<el-table-column prop="H_CreateTime" label="创建时间" width="200"></el-table-column>
	</sc-table-select>

</template>

<script>
	export default {
		components: {

		},
		props: {
			params: {
				type: Object,
				default: () => ({
					pageSize: 20,
					keyword: '',
				})
			},
			multiple: {
				type: Boolean,
				default: false
			},
			props: {
				type: Object,
				default: () => ({
					label: 'ctm_name',
					value: 'H_Id'
				})
			},
			modelValue: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			selectModel: {
				get() {
					return this.modelValue || [];
				},
				set(val) {
					this.$emit('update:modelValue', val);
				}
			}
		},
		data() {
			return {
				cb: null
			}
		},
		mounted() {

		},
		methods: {
			preSubmit(form, submit) {
				if (!form.keyword || form.keyword.length < 2) {
					return this.$message.error("关键词字符数必须大于等于2")
				}
				submit && submit();
			},
			onChange(e) {
				this.cb && this.cb(e)
			},
			toggleMenu(cb) {
				this.cb = cb;
				this.$refs.select.$refs.select.toggleMenu();

				this.$nextTick(() => {
					this.$refs.input.focus();
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.tableSelect :deep(.el-select__selection) {
		display: none;
	}

	.tableSelect :deep(.el-select__wrapper) {
		padding: 0;
		height: auto;
		min-height: 1px;
	}

	.user-avatar {
		height: 80px;
		width: 80px;
		min-width: 80px;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-right: 0.625rem;
		box-sizing: content-box;
		position: relative;
	}

	.sex-nv {
		background-image: url("");
	}

	.sex-nan {
		background-image: url("");
	}
</style>
